<template>
  <page-layout>
    <a-spin :spinning="isLoading">
      <a-card>
        <footer-button :buttons="state.buttons" />
        <a-form>
          <a-row type="flex" justify="space-between">
            <a-col
              :span="7"
              v-for="item in baseFields.fields"
              :key="item.field"
            >
              <a-form-item :label="item.title" class="mb-5">
                {{ handleFormEmptyData(baseFields.data[item.field]) }}
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <a-tabs :active-key(v-model)="activeKey" size="small">
          <a-tab-pane key="detail" tab="详情">
            <DetailBaseForm :data="baseFields.data" />
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </a-spin>
  </page-layout>
</template>

<script setup>
import { reactive, onActivated, createVNode, ref } from "vue";
import { message, modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useRoute, useRouter } from "vue-router";
import { handleFormEmptyData } from "@/tools/filters";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import dictEnum from "@/const/dict";
import { isEmpty } from "@/tools/common";
import DetailBaseForm from "./components/detail-base-form";
import { details } from "@/api/module/ta";
import moment from "moment";

const route = useRoute();
const router = useRouter();
const isLoading = ref(false);
const state = reactive({
  buttons: [
    {
      name: "applyForPayment",
      event: () => handlePay(),
      type: "primary",
      code: "",
    },
    {
      name: "adjust",
      event: () => handleAdjust(),
      type: "primary",
      code: "",
    },
  ],
  commisType: 0,
});

const handlePay = () => {};
const handleAdjust = () => {
  router.push({
    path: "/university/ta-manage/edit",
    query: { id: baseFields.data.id || '' },
  });
};

const baseFields = reactive({
  fields: [
    { title: "助教编码", field: "code" },
    { title: "助教姓名", field: "taName" },
    { title: "性别", field: "taSex" },
    { title: "出生年月", field: "taBirthDate" },
    { title: "专业", field: "taMajor" },
    { title: "所在学校", field: "schName" },
    { title: "创建人", field: "createBy" },
    { title: "创建时间", field: "createTime" },
  ],
  data: {},
  dict: {},
});
const getDataByDict = (data, dictKey) => {
  if (isEmpty(data)) return "-";
  const item = baseFields.dict[dictKey].find((v) => v.value == data);
  if (isEmpty(item)) return "-";
  return item.label;
};

onActivated(async () => {
  const result = route.query;
  if (!result || !result.id) return;
  baseFields.dict = await getDictByCodesReturnObj([
    dictEnum.SEX,
    dictEnum.DOCUMENT_TYPE,
  ]);

  isLoading.value = true;
  let res = await details({ id: result.id });
  if (res.code === 500) return message.error("获取详情失败");
  res.data.files.map(file => (res.data[file.type] = file.name));
  res.data.taBirthDate = res.data.taBirthDate ? moment(res.data.taBirthDate).format('YYYY-MM-DD') : ''
  res.data.taSex = getDataByDict(res.data.taSex, dictEnum.SEX);
  res.data.taDocumentType = getDataByDict(res.data.taDocumentType, dictEnum.DOCUMENT_TYPE);

  baseFields.data = res.data;
  isLoading.value = false;
});
</script>

<style>
</style>